<template>
	<view class="bind-page" v-if="stuentListData">
		<view class="tips-box">提示：绑定学员号可使用全部功能</view>
		<view class="student-list-box" v-for="(item, index) in stuentListData" :key="index">
			<view class="list-box" :class="{ borderColor: item.bindFlag == 1 }">
				<view class="student-name">
					<view class="names-text">{{ item.studentName }}</view>
					<view class="expired" v-if="item.expiredFlag == 1">已过期</view>
				</view>
				<view class="user-head">
					<img :src="`${imgPreFix()}/ic_mine_default_avatar.png`" alt="" />
				</view>
				<view class="code">学员号：{{ item.studentCode }}</view>
				<view
					class="bind-btn"
					v-if="item.bindFlag == 0 && item.expiredFlag == 0"
					@click="unbindStudentCode(true, item.studentCode)"
				>
					绑定
				</view>
				<view class="overdue-btn" v-if="item.bindFlag == 0 && item.expiredFlag == 1">
					绑定
				</view>
				<view
					class="un-bind-btn"
					v-if="item.bindFlag == 1"
					@click="unbindStudentCode(false, item.studentCode)"
				>
					解绑
				</view>
			</view>
		</view>
		<view class="no-student-code" v-if="stuentListData.length == 0">
			<view><img :src="`${imgPreFix()}/img_empty_collect.png`" alt="" /></view>
			<view class="text">暂未查询到可用学员号</view>
		</view>
		<view
			class="add-btn-box"
			:style="{
				top: stuentListData.length == 0 ? '690rpx' : '',
				bottom: stuentListData.length == 0 ? '0rpx' : '94rpx'
			}"
		>
			<view class="add-btn" @click="addStudentCode()">添加学员号</view>
		</view>
	</view>
</template>
<script>
import { apiGetStudentList, apiBindStudentCode } from '@/api/user/user.js'
import { imgPreFix } from '@/common/util/util'
export default {
	data() {
		return {
			stuentListData: '',
			listenType: ''
		}
	},
	onLoad(option) {
		this.listenType = option.listenType || ''
		if (this.listenType) {
			uni.setStorageSync('listenType', this.listenType)
		}
	},
	onShow() {
		this.getStudentList()
	},
	methods: {
		imgPreFix,
		getStudentList() {
			this.$tip.loading()
			apiGetStudentList()
				.then((res) => {
					this.$tip.loaded()
					if (+res.code == 200) {
						this.stuentListData = res.data
					}
					if (+res.code == 500) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
				.catch((res) => {
					this.$tip.loaded()
					this.$tip.error()
					uni.showToast({
						title: res,
						icon: 'none',
						duration: 2000
					})
				})
		},
		unbindStudentCode(bindFlag, studentCode) {
			let qureyData = {
				bindFlag,
				studentCode
			}
			let tips = ' 绑定成功 '
			if (!bindFlag) {
				tips = ' 解绑成功 '
			}
			this.$tip.loading()
			apiBindStudentCode(qureyData)
				.then((res) => {
					this.$tip.loaded()
					if (res.code == 200) {
						uni.showToast({
							title: tips,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							this.stuentListData = ''
							this.getStudentList()
						}, 1000)
					}
					if (+res.code == 500) {
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						})
					}
				})
				.catch((error) => {
					this.$tip.loaded()
					this.$tip.confirm(error.msg, false)
				})
		},
		addStudentCode() {
			uni.navigateTo({
				url: `/pages/bindStudentCode/bindStudent?listenType=${this.listenType}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.bind-page {
	padding-bottom: 200rpx;
	box-sizing: border-box;
	view {
		box-sizing: border-box;
	}
	.no-student-code {
		text-align: center;
		margin-top: 300rpx;
		color: #999999;
		font-size: 24rpx;
		.text {
			margin-top: 20rpx;
		}
		img {
			width: 341rpx;
			height: 173rpx;
		}
	}

	.tips-box {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		background: #fde8e6;
		color: #fd453d;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		margin-bottom: 30rpx;
	}
	.student-list-box {
		width: 100%;
		padding: 0rpx 52rpx 0rpx 52rpx;
		.list-box {
			width: 100%;
			height: 110rpx;
			background: #ffffff;
			border: 1px solid #ececec;
			border-radius: 7rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			position: relative;
			padding-left: 115rpx;
			padding-top: 19rpx;
			.student-name {
				font-size: 28rpx;
				display: flex;
				.expired {
					width: 80rpx;
					height: 36rpx;
					line-height: 36rpx;
					background: #ececec;
					border-radius: 18rpx;
					text-align: center;
					color: #999999;
					font-size: 20rpx;
					margin-left: 20rpx;
				}
			}
			.code {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
			.user-head {
				width: 70rpx;
				height: 70rpx;
				background: #eaeef6;
				position: absolute;
				left: 20rpx;
				top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				img {
					width: 28rpx;
					height: 31rpx;
					margin: auto;
				}
			}
			.un-bind-btn,
			.bind-btn,
			.overdue-btn {
				width: 88rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #fff;
				background: linear-gradient(-90deg, #ff9a4d, #ff623f);
				border-radius: 24rpx;
				position: absolute;
				right: 20rpx;
				top: 28rpx;
				font-size: 20rpx;
				text-align: center;
			}
			.un-bind-btn {
				background: #397ef5 !important;
			}

			.bind-btn {
				background: #fd453d;
			}
			.overdue-btn {
				background: #f5f5f5;
				font-size: 20rpx;
				color: #999;
			}
		}
		.borderColor {
			border-color: #fd453d;
		}
	}
	.add-btn-box {
		position: fixed;
		bottom: 94rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 52rpx;
		.add-btn {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			background: #fd453d;
			border-radius: 41rpx;
			color: #fff;
			text-align: center;
		}
	}
}
</style>
